<template>
  <div style="margin-top: 10px">
    <!--  表格  -->
    <el-table :data="certificates" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="60"> </el-table-column>
      <el-table-column prop="companyName" label="公司名称" width="300">
      </el-table-column>
      <el-table-column prop="business" label="公司业务"> </el-table-column>
      <el-table-column prop="stuName" label="学生姓名"> </el-table-column>
      <el-table-column prop="grade" label="学生年级"> </el-table-column>
      <el-table-column fixed="right" width="200" label="操作">
        <template slot-scope="scope" v-if="userId === scope.row.userId || roleId === 1">
          <el-button @click="showCompetitionPrize(scope.row)" type="primary"
            >编辑
          </el-button>

          <el-button type="danger" @click="deleteCompetitionPrize(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页  -->
    <div style="float:right;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 编辑框，默认关闭 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
      <div>
        <el-form :model="competitionPrize">
          <el-row>
            <el-col :span="12">
              <div style="display: flex">
                <el-form-item label="公司名称:">
                  <el-input
                    size="small"
                    clearable
                    v-model="competitionPrize.companyName"
                    prefix-icon="el-icon-edit"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex">
                <el-form-item label="公司业务:">
                  <el-input
                    size="small"
                    clearable
                    v-model="competitionPrize.business"
                    prefix-icon="el-icon-edit"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div style="display: flex">
                <el-form-item label="学生姓名:">
                  <el-input
                    size="small"
                    clearable
                    v-model="competitionPrize.stuName"
                    prefix-icon="el-icon-edit"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex">
                <el-form-item label="学生年级:">
                  <el-input
                    size="small"
                    clearable
                    v-model="competitionPrize.grade"
                    prefix-icon="el-icon-edit"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCompetitionPrizeAddBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 从父类传过来的数据
  props: {
    query: {
      default: () => {
        return {
          stuName: "",
          name: "",
        };
      },
    },
  },
  data() {
    return {
      certificates: [],
      // 数据总条数
      total: 0,
      size: 10,
      page: 1,
      userId: JSON.parse(sessionStorage.getItem("user")).id,
      roleId: JSON.parse(sessionStorage.getItem("user")).roles[0].id,
      // 用于保存更新时用的数据
      dialogVisible: false, //是否可见
      title: "",
      competitionPrize: {
        id: "",
        userId: "",
        companyName: "",
        stuName: "",
        grade: "",
        business: "",
      },
    };
  },
  methods: {
    getCompetitionPrizeData() {
      const url =
        "/company?" +
        "page=" +
        this.page +
        "&size=" +
        this.size +
        "&stuName=" +
        this.query.stuName +
        "&name=" +
        this.query.name;
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.certificates = resp.data;
          this.total = resp.total;
        }
      });
    },
    deleteCompetitionPrize(data) {
      this.$confirm(
        "此操作将永久删除[" + data.companyName + "]这条数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/company/" + parseInt(data.id)).then((rep) => {
            if (rep) {
              this.getCompetitionPrizeData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 点击
     */
    handleCompetitionPrizeAddBtn() {
      this.putRequest("/company", this.competitionPrize).then((resp) => {
        if (resp) {
          this.dialogVisible = false;
          this.getCompetitionPrizeData();
        }
      });
    },
    /**
     *  打开编辑窗口
     **/
    showCompetitionPrize(data) {
      this.competitionPrize = JSON.parse(JSON.stringify(data));
      this.dialogVisible = true;
    },
    /**
     * 一页显示数据量变化触发事件
     */
    handleSizeChange(val) {
      this.size = val;
      this.getCompetitionPrizeData();
    },
    /**
     * 页码发生变化
     */
    handleCurrentChange(val) {
      this.page = val;
      this.getCompetitionPrizeData();
    },
  },
  mounted() {
    this.getCompetitionPrizeData();
  },
};
</script>

<style scoped></style>
